import { throttle } from "../../utils/utils"

// components/tabs/tabs.js
Component({


  options:{
    // 开启多插槽
    multipleSlots:true
  },

  /**
   * 组件的属性列表
   * 外面传递过来的数据
   */
  properties: {
    tabs:{
      type:Array,
      value:[],
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    currentTabIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 1. 传入一个数组 按数组元素内容渲染我们的标签页选项
    // 2. 能够监听点击事件，并且通知使用组件的页面或者父组件 通过事件通知我们选择了什么
    // 通用组件
    /**
     * 父组件(页面) 通过属性给自定义组件传递参数
     * 自定义组件通过自定义事件给父组件(页面)传递参数
     */
      /**
   * 切换tab
   */
  handleTabChange:throttle(function (event){
    const index = event.currentTarget.dataset.index

    if(index === this.data.currentTabIndex){
      return
    }

    // 高内聚 低耦合
    this.setData({
      currentTabIndex:index
    })
    // 发起事件
    this.triggerEvent('change',{index})
  }),



handleTouchMove(event){
    const direction = event.direction
    const currentTabIndex = this.data.currentTabIndex
    const targetTabIndex = currentTabIndex + direction

    if(targetTabIndex <0 || targetTabIndex > this.data.tabs.length - 1){
      return
    }

    const targetObject = {
      
        currentTarget:{
          dataset:{
            index: targetTabIndex
          }
        }
      
    }
    
    this.handleTabChange(targetObject)

  },

  }
})
